<template>
  <div class="content_body">
    <div v-if="type === 'img'">
      <img :src="url" :data-url="url" />
      <!-- <div style="color: gray; font-size: 12px">- 点击图片可预览 -</div> -->
    </div>
    <div v-if="type === 'video'">
      <video :src="url" controls autoplay></video>
    </div>
    <div v-if="type === 'zip'">
      <div class="copyUrl" @click="copyUrl">
        该资源为压缩包，点我下载
      </div>
      <!-- <div v-if="showUrl">{{url}}</div> -->
      <div>复制地址怎么使用?</div>
      <div>
        复制完毕地址后，请打开手机自带的浏览器，在地址输入栏里面下载后解压并且打开
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      type: null,
      url: null,
      showUrl:false
    };
  },
  mounted() {
    let mUrl = "https://gzccc.chlitchi.com:1433/dev-api" + this.$route.query.url;
    if (mUrl.match(/\.(svg|webp|png|jpg|gif)/)) {
      this.type = "img";
    } else if (mUrl.match(/\.(mp4|avi|m3u8|mov|m4v)/)) {
      this.type = "video";
    } else if (mUrl.match(/\.(zip|rar|7z)/)) {
      this.type = "zip";
    }
    this.url = mUrl;
  },
  destroyed(){
    this.url = ''
  },
  methods:{
    copyUrl(){
      window.location.href = window.location.origin + "/"+this.url;
    }
  }
};
</script>

<style scoped>
.content_body{
  padding: 10px;
  max-width: 1000px;
  margin: 0 auto;
}
img {
  width: 100%;
}

video {
  width: 100%;
}

.content_body_title {
  padding: 10px;
  font-size: 20px;
  font-weight: bold;
  border-bottom: 1px solid #e0e0e0;
}
.content_body_source {
  padding: 10px;
}

.copyUrl {
  cursor: pointer;
  border: 1px solid #e0e0e0;
  color: #f60;
  padding: 5px;
  text-align: center;
  margin: 10px 0;
  border-radius: 10px;
}
</style>